<template>
    <div class="app-container">
        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px"
            size="small">
            <el-form-item label="设备名称" prop="deviceMac">
                <el-input v-model="queryParams.deviceName" clearable placeholder="请输入设备名称"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">{{ $t('search')
                }}</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
            </el-form-item>
        </el-form>

        <el-table :border="false" ref="deviceTable" v-loading="loading" :data="bDeviceList" class="checkDeviceTable"
            @select="selectRow" @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="设备名称" prop="deviceName" />
            <el-table-column align="center" label="所在地" prop="installationAddress" />
            <el-table-column align="center" label="备注" prop="remark" />
        </el-table>
        <div style="width: 100%; position: relative">
            <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page-size="10" :page-sizes="[10, 20, 30]"
                :page.sync="queryParams.pageNum" :total="total" @pagination="getList" />
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import request from '@/utils/request';

export default {
    components: {
        Pagination,
    },
    name: 'BDeviceZtBind',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 云组态组件关联表格数据
            bDeviceList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // orderByColumn:"id",
                // isAsc:"desc",
                deviceName: null,
            },
            selectRowData: {},
        };
    },
    created() {
        this.getList();
    },
    methods: {
        selectRow(val, row) {
            //this.$refs.deviceTable.clearSelection();
            //this.$refs.deviceTable.toggleRowSelection(row, true);
            //this.selectRowData=row;
        },
        handleSelectionChange(selection) {
            this.selectRowData = selection;
        },
        selectRowDataClick() {
            return this.selectRowData;
        },
        /** 查询云组态组件关联列表 */
        getList() {
            this.loading = true;
            let url = '/zutai/bDeviceManager/list';
            request({
                url: url,
                method: 'get',
                params: this.queryParams,
            })
                .then((res) => {
                    // console.log('获取成功!',res);
                    if (res.code == 200) {
                        this.bDeviceList = res.rows;
                        this.total = res.total;
                    }
                    this.loading = false;
                })
                .catch((error) => {
                    // console.log(error)
                    this.loading = false;
                });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.deviceName = '';
            this.handleQuery();
        },
    },
};
</script>

<style lang="scss">
// .checkDeviceTable > .el-table__header-wrapper > table > thead > tr > th:first-child > div {
// 	display: none!important;
// }</style>
